<template>
    <div class="page">
        <div class="row">
            <h1 style="text-align:center;padding:2mm;margin-bottom: 0px;">欢迎光临</h1>
            <h2 style="text-align:center;margin-top: 0px;">{{sinfo.name}}</h2>
        </div>
        <div class="row">
            <p>客户姓名：{{oinfo.name}} </p>
            <p>客户卡号：{{oinfo.vipcard}} </p>
            <p>充值余额剩余：{{oinfo.yue}}元 </p>
            <p>赠送余额剩余：{{oinfo.zsyue}}元 </p>
            <p>&nbsp;&nbsp;</p>
            <p>单号：{{oinfo.order_sn}} </p>
        </div>
        <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
        <div class="row">
            <table>
                <thead>
                    <tr>
                        <th style="width:24mm">名称</th>
                        <th style="width:12mm">价格</th>
                        <th style="width:8mm">数量</th>
                        <th style="width:12mm">优惠后</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(opt,key) in cinfo">
                        <td>{{opt.typename}}</td>
                        <td>{{opt.price}}</td>
                        <td>{{opt.num}}</td>
                        <td>{{opt.amount}}</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="2">小计</td>
                        <td>{{counts.num}}</td>
                        <td>{{counts.amount}}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
        <div class="row">
            <p>实收现金：{{Number(oinfo.recemoney).toFixed(2)}}元</p>
            <p>充值余额支付：{{oinfo.usebalance}}元</p>
            <p>赠送余额支付：{{oinfo.usegiftbalance}}元</p>
            <p>&nbsp;&nbsp;</p>
            <p>下单时间：{{oinfo.addtime|hourTime}}</p>
            <p>打印时间：{{new Date()/1000 | hourTime}}</p>
        </div>
        <p style="border-bottom:1px dashed #000; height:1px;margin:1mm 0px"></p>
        <div class="row">
            <p>电话：{{sinfo.phone}}</p>
            <p>地址：{{sinfo.address}}</p>
            <p>&nbsp;&nbsp;</p>
            <p style="text-align:center">欢迎光临！谢谢惠顾 </p>
        </div>
    </div>
</template>
<script>
import C from '#/src/common/common.js'

export default {
    name: 'printOpenCard',
    data() {
        return {
            oinfo: {},
            cinfo: [],
            sinfo: {},
            id: ''
        }
    },
    methods: {
        async getmsg() {
            let res = await C.ajax('/shop/print/getorderlistinfo', { 'id': this.id }, 'post')
            if (res) {
                this.oinfo = res.oinfo
                this.cinfo = res.olist
                this.sinfo = res.sinfo
            }
        },
        contextMenu() {
            const ipc = require('electron').ipcRenderer
            const { remote } = require('electron')
            const { Menu, MenuItem } = remote
            const menu = new Menu()
            menu.append(new MenuItem({ label: '直接打印', click() { ipc.send('print-now') } }))
            menu.append(new MenuItem({ type: 'separator' }))
            menu.append(new MenuItem({ label: '打印预览', click() { ipc.send('print-to-pdf') } }))
            window.addEventListener('contextmenu', (e) => {
                e.preventDefault()
                menu.popup(remote.getCurrentWindow())
            }, false)
        }
    },
    computed: {
        counts: function() {
            var d = { num: 0, amount: 0 }
            for (var i = this.cinfo.length - 1; i >= 0; i--) {
                d.num += this.cinfo[i].num
                d.amount += this.cinfo[i].amount
            }
            return d
        }
    },
    mounted: function() {
        this.id = C.getDatas().id
        this.getmsg()
        this.contextMenu()
    }
}
</script>
<style>
body {
    width: 58mm;
    margin: 0mm auto;
    padding: 0;
    background-color: #FAFAFA;
    font: 3mm "Arial";
}

p {
    margin: 0px;
}

* {
    box-sizing: border-box;
}

.row {
    padding: 0px 1mm;
}

.page {
    width: 58mm;
    min-height: 210mm;
    border-radius: 5px;
    background: white;
    /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);*/
    color: #000;
    margin: auto;
}

.content {
    border: none;
}

@page {
    size: 58mm auto;
    margin: 0;
}

@media print {
    html,
    body {
        width: 48mm;
        height: auto;
        margin: 0;
        padding: 0;
        background: white;
    }
    .page {
        padding: 0;
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: transparent;
        page-break-after: always;
    }
}

th {
    text-align: left;
}

[v-cloak] {
    display: none;
}
</style>